<template>
  <a-modal
    v-model="show"
    :width="900"
    :keyboard="false"
    :closable="false"
    :centered="true"
    @ok="ok"
    @cancel="cancel"
    :maskClosable="false"
    :mask="false"
    okText="确认"
    cancelText="取消">
    <a-tabs>
      <a-tab-pane tab="系统图标" key="1">
        <ul>
          <li v-for="icon in icons.appIcons" :key="icon">
            <img :src="icon" @click="chooseIcon(icon)" :class="{'active':activeIndex === icon}"/>
          </li>
        </ul>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script>
  import { getAction } from '@/api/manage'
  const appIcons = ['https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/chuchai.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/duanxin.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/gongwen.png',
  'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/hetong.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/huiyi.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/kaoqin.png',
  'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/kehu.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/liucheng.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/qingjia.png',
  'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/qingjia1.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/renwu.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/richang.png',
  'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/richeng.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/tongxun.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/tongzhi.png',
  'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/toupiao.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/wendang.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/xinwen.png',
  'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/youjian.png', 'https://jeecgos.oss-cn-beijing.aliyuncs.com/files/appimg/128/zhoubao.png']

export default {
  name: 'Icons',
  props: {
    iconChooseVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      icons: {
        appIcons
      },
      appConfig: null,
      routeImgJson: '',
      choosedIcon: '',
      activeIndex: ''
    }
  },
  computed: {
    show: {
      get: function () {
        return this.iconChooseVisible
      },
      set: function () {
      }
    }
  },
  methods: {
    reset () {
      this.activeIndex = ''
    },
    chooseIcon (icon) {
      this.activeIndex = icon
      this.choosedIcon = icon
      //this.$message.success(`选中 ${icon}`)
    },
    ok () {
      if (this.choosedIcon === '') {
        this.$message.warning('尚未选择任何图标')
        return
      }
      this.reset()
      this.$emit('choose', this.choosedIcon)
    },
    cancel () {
      this.reset()
      this.$emit('close')
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@/assets/less/AppIcon.less';
</style>
